<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table1{
            width: 400px;
            height: 400px;
        }

        td{
            border-width: 3px; /* 设置边框宽度 */
            border-style: solid; /* 设置边框样式（实线） */
            border-color: #000; /* 设置边框颜色 */
        }

        /* 第一个格子 */
        .td1_1{
            background-color: red;
        }

        /* 第二个格子 */
        .td1_2{
            background-color: bisque;
        }
        .td1_2_div1{
            margin: 0 auto;
            background-color: pink;
            width: 50%;
            height: 80%;
            box-sizing:border-box;
            border-radius: 50%;
        }

        /* 第三个格子 */
        .td1_3{
            padding: 0;
        }
        .item{
            float: left;
            width: 48%;
            height: 100%;
        }
        .td1_3 .item .td1_3_div1{
            width: 100%;
            height: 50%;
            background-color: green;
    
        }
        .td1_3 .item .td1_3_div2{
            width: 100%;
            height: 50%;
            background-color: red;

        }
        .td1_3 .td1_3_div3{
            float: right;
            width: 49%;
            height: 100%;
            background-color: blue;
            border-left: 3px solid black;

        }

        /* 第四个格子透明 */
        /* 第五个格子 */
        .td2_1{
            padding: 0;
        }
        .td2_1 .td2_1_div1{
            padding: 0;
            height: 40%;
            background-color:thistle;
        
            
        }
        .td2_1 .td2_1_div2{
            height: 20%;
            background-color:yellow;
        }

        .td2_1 .td2_1_div3{
            box-sizing: border-box;
            height: 20%;
            background-color:red;
        }
        .td2_1 .td2_1_div4{
            height: 20%;
            background-color:cyan;
 
        }

        .td2_3 {
            background-color: chartreuse;
        }

        .item1{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        /* .item1.td2_4_div1{
            width: 33%;
            height: 100%;
            background-color: rgb(23, 40, 98);
            display: inline-block;
        }
        .item1 .td2_4_div2{
            width: 33%;
            height: 100;
            background-color: rgb(251, 25, 25);
            display: inline-block;
        }
        .item1 .td2_4_div3{
            width: 33%;
            height: 100%;
            background-color: rgb(216, 69, 69);
            display: inline-block;
        } */

        .td3_2{
            background-color: #ab2073ed;
        }

        .item2{
            float: left;

        }
        .td4_4{
            background-color: #830000;
        }
    </style>
</head>
<body>
    <table class="table1" border="3" cellspacing="0">
        <tr>
            <td class="td1_1"></td>
            <td class="td1_2">
                <div class="td1_2_div1"> </div>
            </td>
            <td class="td1_3">
                <div class="item">
                    <div class="td1_3_div1"></div>
                    <div class="td1_3_div2"></div>
                </div>
                <div class="td1_3_div3"></div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="td2_1">
                <div class="td2_1_div1"></div>
                <div class="td2_1_div2"></div>
                <div class="td2_1_div3"></div>
                <div class="td2_1_div4"></div>
            </td>
            <td></td>
            <td class="td2_3"></td>
            <td class="td2_4">
                <div class="item1">
                    <div class="td2_4_div1"></div><div class="td2_4_div2"></div><div class="td2_4_div3"></div>
                </div>
            </td>
        </tr>
        <tr> 
            <td></td>
            <td class="td3_2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="td4_1">
                <div class="item2">
                    <div class="td4_1_div1"></div><div class="td4_1_divv2"></div>
                </div>
                <div class="item3">
                    <div class="td4_1_div3"></div><div class="td4_1_divv4"></div>
                </div>
            </td>
            <td></td>
            <td></td>
            <td class="td4_4"></td>
        </tr>
    </table>
</body>
</html>